<template>
	<view class="login-pop" v-if="isShowNewAuthPop" catchtouchmove="true" @touchmove="toDeal">
		<view class="popup-contain">
		            <view class="pop-bottom">
		                <view class="top-left">
		                    <image class="logo-img" src="../../static/arrow-cell-right.png" />
		                    <view>有一招 <text>申请</text></view>
		                </view>
		            </view>
		            <view class="get-nickname-text">获取你的昵称、头像</view>
		            <view class="go-login-text">注册、登录小程序</view>
		           <view class="gray-line"></view>
		            <form @submit="formSubmit">
		                <view class="get-auth-contain">
		                    <!-- 头像获取 -->
		                    <view class="avatar-head-img">
		                        <view class="title-tip">头像</view>
		                        <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
		                           <view v-if='tmpAvatarUrl' class="avatar-box">
		                                <image class="avatar" :src="tmpAvatarUrl" />
		                                <!-- <image class="arrow" src="../../static/arrow-cell-right.png" /> -->
		                            </view>
		                            <view v-else class="click-head">点此选择微信头像</view>
		                        </button>
		                    </view>
		                    <view class="gray-line-1"></view>
		                    <!-- 昵称获取 -->
		                    <view class="nickname-input">
		                        <view class="title-tip">昵称</view>
		                        <input type="nickname" class="name-input" :value='nameDefaultValue' placeholder-style="color:#58BE6B;font-ize:28rpx;font-weight:400"
		                            placeholder="点此使用微信昵称" name="nickname" />
		                    </view>
		                    <view class="gray-line-1"></view>
		                </view>
		               <view class="submit-box1">
		                    <view class="reject-btn" @click='closePopup(false)'>取消</view>
		                    <button class="submit-btn" type="primary" formType="submit">确定</button>
		                </view>
		            </form>
		        </view>
		        <canvas id="myCanvas" canvas-id="myCanvas" :style="{width:cWidth + 'px',height: cHeight + 'px',position: 'absolute',left:'-9000px',top:'-9000px'}"></canvas>
	</view>
</template>

<script>
	import { uploadFile } from '../../api/index.js' 
	import { onGotUserInfo } from '../../api/login.js'
	import { pressHeadImg, nickNameCharacterCount } from '../../utils/dealAvatarNickname.js'
	export default {
		name: "InputLoginPop",
		props: ["isShowNewAuthPop"],
		data() {
			return {
				tmpAvatarUrl: '',
				nameDefaultValue: '123',
				cidx: 0,
				cWidth: 528,
				cHeight: 528,
			}
		},
		mounted() {
			
		},
		methods: {
			// 拒绝授权按钮
			closePopup(flag) {
				this.tmpAvatarUrl = ''
				this.$emit('closeAuthPop', flag)
			},
			toDeal() {
				console.log(this)
			},
			getUserInfo(idx, obj) {
				// console.log('obj', obj)
				this.cidx = idx
				let statusName = obj.name
				this.$emit('changeLoginStatus',)
			},
			async onChooseAvatar(e) {
				const { avatarUrl } = e.detail
				console.log('头像e.detail---', e.detail)
				wx.showLoading({
					title: '图片压缩中...',
					mask: true
				})
				let pressUrl = await pressHeadImg(avatarUrl,'myCanvas',this.cWidth,this.cHeight, this)
				this.tmpAvatarUrl = pressUrl
				wx.hideLoading()
			},
			// 提交授权信息
			async formSubmit(e) {
				console.log('formSubmit', e.detail)
				console.log('formSubmit', this.tmpAvatarUrl)
				let { nickname } = e.detail.value
				if(!this.tmpAvatarUrl && !nickname){
					uni.showToast({
						title: '请点击获取头像和昵称~'
					});
					return
				}
				if (!this.tmpAvatarUrl) {
					uni.showToast({
						title: '请点击获取微信头像~'
					});
					return
				}
				if (!nickname) {
					uni.showToast({
						title: '请点击获取微信昵称~'
					});
					return
				}
				let characterLength = nickNameCharacterCount(nickname)
				console.log('characterLength==', characterLength)
				if (!characterLength || characterLength < 2 || characterLength > 32) {
					uni.showToast({
						title: '请输入2~32个字符的昵称~'
					});
					return
				}
			   this.saveImg(nickname)
			},
			// 用户点击确定 保存图片到远程
			async saveImg(nickname){
				wx.showLoading({
					title: '图片上传中...',
					mask: true
				});
				console.log('tmpAvatarUrl--',this.tmpAvatarUrl)
				if (this.tmpAvatarUrl) {
					let returnData = await uploadFile({file: this.tmpAvatarUrl})
					console.log('头像上传返回值returnData==', returnData)
					if (!returnData) {
						this.tmpAvatarUrl = ''
						uni.showToast({
							title: '头像上传失败请稍后重试！'
						});
					} else {
						let userInfoBoj = { avatar: returnData, username: nickname.trim() }
						let isLogin = await onGotUserInfo(userInfoBoj)
						console.log('idLogin===', isLogin)
						if (isLogin) {
							this.closePopup(true)
						}else{
							uni.showToast({
								title: '上传失败请稍后重试！'
							});	
						}
						this.closePopup(true)
					}
				} else {
					uni.showToast({
						title: '头像获取失败请稍后重试！'
					});
				}
				wx.hideLoading()
			}
		}
	}
</script>

<style scoped>
	.login-pop {
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 15;
	}
	.auth-btn {
	  width: 100%;
	  height: 100%;
	  background: transparent;
	}
	.popup-contain {
	    width: 100%;
	    height: 766rpx;
	    overflow: hidden;
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    background: #fff;
	    border-radius: 10rpx 10rpx 0 0;
		}
	
	    .pop-bottom {
	      display: flex;
	      align-items: center;
	      margin-top: 45rpx;
	      padding-left: 38rpx;
		  }
	      .top-left {
	        display: flex;
	        align-items: center;
	        color: #333;
	        font-size: 32rpx;
	        font-weight: bold;
			}
	        .logo-img {
	          width: 62rpx;
	          height: 62rpx;
	          margin-right: 21rpx;
			  
	        }
	        text {
	          margin-left: 10rpx;
	        }
	      
	    
	    .gray-line {
	      width: 100%;
	      height: 2rpx;
	      background: #f5f5f5;
	      border-radius: 3rpx;
	      margin: 28rpx 0 26rpx;
	    }
	    .gray-line-1 {
	      width: 670rpx;
	      height: 2rpx;
	      background: #f5f5f5;
	      border-radius: 3rpx;
	      margin: 45rpx auto;
	      //   margin: 28rpx 0 26rpx;
	    }
	    .get-nickname-text {
	      font-size: 34rpx;
	      color: #333;
	      font-weight: bold;
	      margin: 31rpx 0 7rpx;
	      padding-left: 38rpx;
	    }
	    .go-login-text {
	      font-size: 28rpx;
	      color: #333;
	      padding-left: 38rpx;
	    }
	    .avatar-wrapper {
	      height: 100rpx;
	      margin: 0;
	      padding: 0;
	      border: none;
	      background: transparent;
		  }
	      .avatar-box {
	        display: flex;
	        align-items: center;
	      }
	      .avatar {
	        width: 82rpx;
	        height: 82rpx;
	        margin-right: 421rpx;
	        border-radius: 10rpx;
	      }
	      .arrow {
	        width: 16rpx;
	        height: 28rpx;
	      }
	    
	    .submit-box1 {
	      display: flex;
	      align-items: center;
	      justify-content: center;
	}
	      .reject-btn, .submit-btn {
	        width: 240rpx;
	        height: 82rpx;
	        border-radius: 8rpx;
	        text-align: center;
	        line-height: 82rpx;
	        font-size: 34rpx !important;
	        // background: rgb(62, 139, 80);
	        // margin: 10rpx;
	      }
	      .reject-btn {
	        border: 2px solid #f5f5f5;
	        color: #999999;
	        margin-right: 32rpx;
	      }
	      .submit-btn {
	        background: #58be6b;
	        color: #fff;
	        margin: 0;
	        padding: 0;
	        border: none;
	      }
	    
	

	      .title-tip {
	        font-size: 33rpx;
	        color: #333;
	        padding-left: 38rpx;
	        margin-right: 47rpx;
	      }
	      .click-head {
	        color: #58be6b;
	        font-size: 28rpx;
	      }
	      .avatar-head-img {
	        display: flex;
	        align-items: center;
	      }
	      .nickname-input {
	        display: flex;
	        align-items: center;
			}
	        .name-input {
	          // font-size: 32rpx;
	          font-size: 28rpx;
	          color: #333333;
	          font-weight: bold;
	        }

	  
	
</style>
